import React from 'react';
import ReactDOM from 'react-dom';

// React 组件定义 数据（状态）
class Counter extends React.Component {
  constructor() {
    super();
    // 组件的状态容器-data
    this.state = {
      count: 0,
      UI: <h2>我是state中定义的JSX</h2>,
      fn: (arg) => <div>{arg}</div>,
      name: 'xxx',
    };
  }

  // 类的实例变量
  // state = {
  //   count: 0
  // }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={() => this.setState({ count: ++this.state.count })}>
          +1
        </button>
      </div>
    );
  }
}

// React 组件的使用规则
ReactDOM.render(
  <div>
    <Counter />
    <Counter />
  </div>,
  document.getElementById('root')
);
